<template>
	<view class="eq-shopCart">
		<view class="eq-layout">
			<view class="eq-header">
				<image class="icon" src="/static/imgs/i-left.png" mode="widthFix" @click="goBack"></image>
				<view class="title">购物车({{cartList.length}})</view>
				<view class="editor" v-if="!isEditing" @click="toggleEdit">
					<text>编辑</text>
					<image class="icon" src="/static/liaotian.png" mode="widthFix"></image>
				</view>
				<view v-else class="success" @click="toggleEdit">完成</view>
			</view>
			<view v-if="cartList.length <= 0" class="eq-empty">
				<view class="eq-banner">
					<image src="/static/imgs/emptycar.png" mode="widthFix"></image>
					<text>你的购物车空空如也</text>
					<view class="btn_go" @click="goIndex">去逛逛</view>
				</view>
				<view class="eq-look">
					<text>大家都在看</text>
					<view class="null">
						<image src="/static/imgs/noresult.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="eq-full">
				<view class="shop" v-if="cartList.length > 0">
					<view class="goods">
						<view v-for="(group, groupIndex) in groupList" :key="groupIndex">
							<view class="group-header">
								<checkbox style="transform: scale(0.6); margin-right: 15rpx;" :checked="isGroups(group)"
									@click="groupSelect(groupIndex)" />
								<text class="shop-name">{{group.shopName}}</text>
							</view>
							<view class="item" v-for="(item, itemIndex) in group.items" :key="itemIndex">
								<view class="goods-box">
									<checkbox style="transform: scale(0.6); margin-right: 15rpx;"
										:checked="item.selected" @click="itemSelect(item)" />
									<view class="image_warp">
										<image :src="item.img_url" mode="widthFix"></image>
									</view>
									<view class="goods-desc">
										<view class="goods-desc-ts">
											<text class="title">{{item.title}}</text>
										</view>
										<view class="goods-desc-lx">
											<text class="opt">颜色：{{item.color}}；尺码：{{item.size}}</text>
										</view>
										<view class="goods-bom">
											<view class="goods-desc-price">
												¥{{ (parseFloat(item.price) || 0).toFixed(2) }}</view>
											<view class="goods-desc-num">
												<text @click="reduceNum(item)">-</text>
												<text class="tColor">{{item.num}}</text>
												<text @click="addNum(item)">+</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="eq-footer" v-if="cartList.length > 0">
					<view class="checkbox">
						<checkbox style="transform: scale(0.6); margin: 0;" :checked="allSelected" @click="allSelect" />
						<text class="all">全选（{{selectedCount}}）</text>
					</view>
					<view v-if="!isEditing">
						<text class="p1">¥{{totalPrice.toFixed(2)}}</text>
						<text class="btn" @click="pay">结算</text>
					</view>

					<view v-else class="edit-del">
						<text class="coll">移入收藏夹</text>
						<text class="btn" @click="delLists">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		computed
	} from 'vue';
	const cartList = ref([]);
	const isEditing = ref(false);

	const selectedCount = computed(() => {
		return cartList.value.filter(item => item.selected).length;
	});

	const totalPrice = computed(() => {
		return cartList.value
			.filter(item => item.selected)
			.reduce((sum, item) => {
				const price = parseFloat(item.price) || 0;
				const quantity = parseInt(item.num) || 1;
				return sum + price * quantity;
			}, 0);
	});

	const allSelected = computed(() => {
		return cartList.value.length > 0 && cartList.value.every(item => item.selected);
	});


	const groupList = computed(() => {
		const groups = {};
		cartList.value.forEach(item => {
			const shopName = item.shopName;

			if (!groups[shopName]) {
				groups[shopName] = {
					shopName,
					items: []
				};
			}
			groups[shopName].items.push(item);
		});
		return Object.values(groups);
	});


	const getCartList = () => {
		const cartData = uni.getStorageSync('cart') || [];
		cartList.value = cartData.map(item => ({
			...item,
			selected: item.selected || false,
			shopName: item.shopName
		}));
	}
	getCartList();

	const delLists = () => {
		if (selectedCount.value == 0) {
			uni.showToast({
				title: '请选择要删除的商品',
				icon: 'none',
				duration: 1500
			});
			return;
		}
		const newList = cartList.value.filter(item => !item.selected);
		cartList.value = newList;
		uni.setStorageSync('cart', newList);
		uni.showToast({
			title: '删除成功',
			icon: 'success',
			duration: 1500
		});
	}



	const isGroups = (group) => {
		return group.items.length > 0 && group.items.every(item => item.selected);
	};

	const itemSelect = (item) => {
		item.selected = !item.selected;

		cartList.value = [...cartList.value];

		uni.setStorageSync('cart', cartList.value);
	};

	const allSelect = () => {
		const shouldSelect = !allSelected.value;

		const newList = cartList.value.map(item => ({
			...item,
			selected: shouldSelect
		}));

		cartList.value = newList;
		uni.setStorageSync('cart', newList);
	};

	const groupSelect = (groupIndex) => {
		const group = groupList.value[groupIndex];
		if (!group) return;
		const shouldSelect = !group.items.every(item => item.selected);
		const newList = cartList.value.map(item => {
			const inGroup = group.items.some(groupItem => groupItem.id === item.id);
			if (inGroup) {
				return {
					...item,
					selected: shouldSelect
				};
			}
			return item;
		});

		cartList.value = newList;
		uni.setStorageSync('cart', newList);
	};

	const toggleEdit = () => {
		isEditing.value = !isEditing.value
	};

	const reduceNum = (item) => {
		if (item.num > 1) {
			const newList = [...cartList.value];
			const index = newList.findIndex(i => i.id === item.id);
			if (index !== -1) {
				newList[index].num -= 1;
				cartList.value = newList;
				uni.setStorageSync('cart', newList);
			}
		}
	};

	const addNum = (item) => {
		const newList = [...cartList.value];
		const index = newList.findIndex(i => i.id === item.id);
		if (index !== -1) {
			newList[index].num += 1;
			cartList.value = newList;
			uni.setStorageSync('cart', newList);
		}
	};

	const goBack = () => {
		uni.navigateBack(-1);
	}

	const goIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}

	const pay = () => {
		if (selectedCount.value == 0) {
			uni.showToast({
				title: '请选择商品',
				icon: 'none',
				duration: 1500
			});
			return;
		}
		const newList = cartList.value.filter(item => !item.selected);
		cartList.value = newList;
		uni.setStorageSync('cart', newList);
		uni.showToast({
			title: '结算成功',
			icon: 'success',
			duration: 1500
		});
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}, 1500);

	}
</script>

<style lang="scss" scoped>
	.eq-shopCart {
		background-color: #EFEFEF;
		font-size: 25rpx;
		color: #777;
		padding-bottom: 180rpx;

		.eq-layout {
			.icon {
				width: 30rpx;
				cursor: pointer;
			}

			.eq-header {
				box-sizing: border-box;
				width: 100%;
				height: 80rpx;
				background-color: #FAFAFA;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.title {
					font-size: 30rpx;
					margin-left: 60rpx;
				}

				.editor {
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.eq-empty {
				.eq-banner {
					width: 100%;
					text-align: center;
					background-color: #fff;
					padding: 10rpx 0;

					text {
						display: block;
					}

					.btn_go {
						background-color: #FF5777;
						color: #fff;
						padding: 12rpx 25rpx;
						width: 200rpx;
						border-radius: 5rpx;
						margin: 20rpx auto;

					}
				}

				.eq-look {
					margin-top: 30rpx;
					padding: 10rpx 25rpx;
					box-sizing: border-box;

					width: 100%;

					.null {
						margin-top: 30rpx;
						// height: 1000rpx;
						text-align: center;
						line-height: 1000rpx;
					}

					image {
						text-align: center;
					}
				}
			}

			.eq-full {
				position: relative;
			}

			.shop {
				width: 714rpx;
				min-height: 40rpx;
				padding: 40rpx 30rpx;
				margin: 18rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.goods {
					overflow: hidden;
					background-color: #fff;
					.group-header {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #eee;
					
						.shop-name {
							font-weight: bold;
							font-size: 28rpx;
							color: #333;
						}
					}

					.item {
						// position: relative;
						// margin-top: 40rpx;
						transition: 1s ease;

						.mark_name {
							display: flex;
							align-items: center;
							font-weight: bold;
							line-height: 1.7;
							margin-bottom: 20rpx;
							color: #000;
						}

						.goods-box {
							display: flex;
							align-items: center;
							box-sizing: border-box;

							.image_warp {
								width: 160rpx;
								height: 200rpx;
								margin-right: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.goods-desc {
								line-height: 1.5;

								.goods-desc-ts {
									margin-bottom: 15rpx;

									.title {
										font-size: 24rpx;
										color: #000;
										font-weight: bold;

									}
								}

								.goods-desc-lx {
									color: #ccc;
									background-color: #f7f7f7;
									font-size: 18rpx;
									margin-bottom: 10rpx;
								}

								.goods-bom {
									display: flex;
									align-items: center;
									justify-content: space-between;
									padding: 0 15rpx;

									.goods-desc-price {
										color: #FF5777;
										font-weight: bold;
									}

									.goods-desc-num {
										width: 100rpx;
										text-align: center;
										border: 1rpx solid #f0f0f0;
										display: flex;
										align-items: center;

										text {
											padding: 5rpx 10rpx;

											&:nth-child(2) {
												color: #000;
												font-weight: bold;
											}
										}
									}
								}
							}
						}

					}

				}
			}

			.eq-footer {
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				position: fixed;
				left: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				font-size: 28rpx;

				.checkbox {
					display: flex;
					align-items: center;

					.all {
						margin-left: 15rpx;
					}
				}

				.p1 {
					color: #FF5777;
					font-weight: bold;
				}

				.btn {
					background-color: #FF5777;
					color: #FFF;
					border-radius: 25rpx;
					padding: 10rpx 20rpx;
					margin-left: 15rpx;
				}

				.edit-del {

					.coll {
						color: #FF5777;
						border: 1rpx solid #FF5777;
						border-radius: 25rpx;
						padding: 10rpx 15rpx;

					}
				}

			}

		}
	}
</style>